<template>
	<div>
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>{{$store.state.company.companyName}}</el-breadcrumb-item>
				<el-breadcrumb-item>智能装备</el-breadcrumb-item>
				<el-breadcrumb-item>服务团队</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="tableNavBox">
			<div class="menberConTitle flex" style="justify-content: space-between;">
				<div class="tableTitle">团队基本信息：</div>
			</div>
			<formTemplate :formSet="formSet" :postData="formData" :optionData="optionData">
				<template slot="A" slot-scope="scope" >
					<el-form-item label="团队服务能力：" label-width="130px">
						<el-checkbox-group v-model="formData.A">
            	    		<el-checkbox label="项目设计"></el-checkbox>
            	    		<el-checkbox label="项目施工"></el-checkbox>
            	    		<el-checkbox label="委托管理"></el-checkbox>
            			</el-checkbox-group>
					</el-form-item>
				</template>
			</formTemplate>
			<div class="menberConTitle flex" style="justify-content: space-between;">
				<div class="tableTitle">服务列表：</div>
			</div>
			<template v-if="checkList.length != 0">
				<div class="checkBox" v-for="(item,index) in checkList" :key="index">
					<span style="margin-right:10px">{{item.label}}：</span>
					<el-checkbox-group v-model="formData.serviceId">
            	    	<el-checkbox v-for="(val,index) in item.data" :key="index" :label="val.serviceValue" ></el-checkbox>
            		</el-checkbox-group>
				</div>
			</template>
			<template v-else-if="noData">
				<div class="no_data">暂无数据</div>
			</template>
			<!-- <template >
				<div class="no_data">暂无数据</div>
			</template> -->
		</div>
		<div class="btnBox" >
			<el-button type="primary" round >保存</el-button>
		</div>
	</div>
</template>

<script>
	// import tableForm from '@/components/tableForm.vue'
	import formTemplate from '@/components/form.vue'
	export default {
		components: {
			// tableForm
			formTemplate
		},
		data() {
			return {
				noData:false,
				checkList:[],
				res:{
					data:[
					  {
            "id": "1",
            "page": null,
            "pageSize": null,
            "companyId": "90aebb81c7f54edabfb5eaab443f04f3",
            "serviceType": "数字基地",
            "supplierServices": "三维建模",
            "createDate": "2021-04-02 15:11:31.0"
        },
        {
            "id": "10",
            "page": null,
            "pageSize": null,
            "companyId": "90aebb81c7f54edabfb5eaab443f04f3",
            "serviceType": "智能农机",
            "supplierServices": "智能施肥",
            "createDate": "2021-04-02 15:11:31.0"
        },
        {
            "id": "11",
            "page": null,
            "pageSize": null,
            "companyId": "90aebb81c7f54edabfb5eaab443f04f3",
            "serviceType": "智能农机",
            "supplierServices": "智能除草",
            "createDate": "2021-04-02 15:11:31.0"
        },
        {
            "id": "12",
            "page": null,
            "pageSize": null,
            "companyId": "90aebb81c7f54edabfb5eaab443f04f3",
            "serviceType": "智能农机",
            "supplierServices": "智能植保",
            "createDate": "2021-04-02 15:11:31.0"
        },
        {
            "id": "13",
            "page": null,
            "pageSize": null,
            "companyId": "90aebb81c7f54edabfb5eaab443f04f3",
            "serviceType": "智能农机",
            "supplierServices": "智能飞防",
            "createDate": "2021-04-02 15:11:31.0"
        },
        {
            "id": "14",
            "page": null,
            "pageSize": null,
            "companyId": "90aebb81c7f54edabfb5eaab443f04f3",
            "serviceType": "智能监控",
            "supplierServices": "生长监控",
            "createDate": "2021-04-02 15:11:31.0"
        },
        {
            "id": "15",
            "page": null,
            "pageSize": null,
            "companyId": "90aebb81c7f54edabfb5eaab443f04f3",
            "serviceType": "智能监控",
            "supplierServices": "果园安防",
            "createDate": "2021-04-02 15:11:31.0"
        },
        {
            "id": "2",
            "page": null,
            "pageSize": null,
            "companyId": "90aebb81c7f54edabfb5eaab443f04f3",
            "serviceType": "数字基地",
            "supplierServices": "360全景",
            "createDate": "2021-04-02 15:11:31.0"
        },
        {
            "id": "3",
            "page": null,
            "pageSize": null,
            "companyId": "90aebb81c7f54edabfb5eaab443f04f3",
            "serviceType": "气象物联",
            "supplierServices": "空气监测",
            "createDate": "2021-04-02 15:11:31.0"
        },
        {
            "id": "4",
            "page": null,
            "pageSize": null,
            "companyId": "90aebb81c7f54edabfb5eaab443f04f3",
            "serviceType": "气象物联",
            "supplierServices": "土壤监测",
            "createDate": "2021-04-02 15:11:31.0"
        },
        {
            "id": "5",
            "page": null,
            "pageSize": null,
            "companyId": "90aebb81c7f54edabfb5eaab443f04f3",
            "serviceType": "气象物联",
            "supplierServices": "环境监测",
            "createDate": "2021-04-02 15:11:31.0"
        },
        {
            "id": "6",
            "page": null,
            "pageSize": null,
            "companyId": "90aebb81c7f54edabfb5eaab443f04f3",
            "serviceType": "智能水肥",
            "supplierServices": "智能高压",
            "createDate": "2021-04-02 15:11:31.0"
        },
        {
            "id": "7",
            "page": null,
            "pageSize": null,
            "companyId": "90aebb81c7f54edabfb5eaab443f04f3",
            "serviceType": "智能水肥",
            "supplierServices": "智能水肥",
            "createDate": "2021-04-02 15:11:31.0"
        },
        {
            "id": "8",
            "page": null,
            "pageSize": null,
            "companyId": "90aebb81c7f54edabfb5eaab443f04f3",
            "serviceType": "智能水肥",
            "supplierServices": "智能喷灌",
            "createDate": "2021-04-02 15:11:31.0"
        },
        {
            "id": "9",
            "page": null,
            "pageSize": null,
            "companyId": "90aebb81c7f54edabfb5eaab443f04f3",
            "serviceType": "智能水肥",
            "supplierServices": "智能弥雾",
            "createDate": "2021-04-02 15:11:31.0"
        }
				],
				},
				companyId: '',
				companyName: this.$store.state.company.companyName,
				userId: this.$store.state.user.userInfo.id,
				tableData: [{}],
				formData:{
					A:[],
					serviceId:[],
				},
				formSet:[
                    { span: 14, label: '公司名称：', prop: 'supplierId', type: 'select' ,labelWidth:'650px' },
                    { span: 14, label: '负责人：', prop: 'createUserName', type: 'input',labelWidth:'650px' },
                    { span: 14, label: '负责人：', prop: 'A', type: 'slot', },
                ],
				optionData:{

				},
			}
		},
		created() {
			this.$store.commit('digitalOrchard_leftNavIndex', 11)
			this.getSupplierServicesByCompanyId()
			this.getCompanyList()
		},
		mounted() {
			// this.$store.commit('set_teamNavIndex', 212)
			let store = this.$store.state.user
			this.userId = store.userInfo.id
			
			this.companyId = this.$store.state.company.selectCompanyId ?
				this.$store.state.company.selectCompanyId : this.$store.state.company.companyId

		},
		watch: {


		},
		methods: {
			getCompanyList() {
				// 获取用户所有公司列表
				this.$request.postForm(this.$api.getCompanyByUser, {
					userId: this.userId
				}).then(res => {
					if (res.code == 200) {
						let a = []
						a = res.data.map(item =>{
							return{
								name:item.labelName,
								value:item.id
							}
						})
				        this.$set(this.optionData,'supplierId',a)
					}
				})
			},
			getSupplierServicesByCompanyId(){
				this.$request.get(this.$api.getServiceList).then(res=>{
					if(res.code == 200){
						this.res.data = res.data
					}
					if(this.res.data.length>0){
							this.noData = false
							this.res.data.forEach(item =>{
								this.checkList.push({label:item.typeName,data:item.serviceListEntity})
							})
							// let a = []
							// this.res.data.forEach(item =>{
							// 	let flag = false
							// 	if(a.length > 0){
							// 		a.forEach(i =>{
							// 			if(item.serviceType == i.label){
							// 				flag = true
							// 			}	
							// 		})
							// 	}
							// 	if(flag == false){
							// 		a.push({label:item.serviceType})
							// 	}
							// })
							
							// a.forEach(item =>{
							// 	let newArr = this.res.data.filter(function (value, index, array) {
							//         return value.serviceType == item.label;
							//     });
							// 	item.data = newArr
							// })
							// this.checkList = a
							// console.log(this.checkList);
						}else{
							this.checkList = []
							this.noData = true
						}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.breadcrumb,
	.tableNavBox {
		padding: 20px;
	}

	.tableNavBox {
		padding-top: 0;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
		margin-top: 20px;
	}
	.btnBox {
		width: 100%;
		padding-top: 15px;
		border-top: 1px solid #DCDCDC;
		text-align: center;
		.el-button{
			width: 120px;
			margin-right: 5px;
		}
	}
	.checkBox{
		display: flex;
		justify-content: flex-start;
		padding: 10px 0 18px 20px;
	}
	.no_data{
		padding: 0 40px;
		color:#909399
	}
	.dialogVisible>>>.el-input__inner {
		width: 270px;
	}
</style>
